<!--首页页面-->
<template>

<div style="padding: 0">
  <el-carousel height="380px">
    <el-carousel-item v-for="item in imgList2" :key="item.id">
      <img :src="item.idView" class="image" style="width:100%;height: auto;">
    </el-carousel-item>
  </el-carousel>

  <div class="mid__inf">
    <div class="left__sentence">
      <div class="top__days">
        <div class="days">
          <p>我的第<span style="color: limegreen">356</span>天打卡</p>
        </div>
      </div>
      <div class="mid__sentence">
        <div class="left__user__img">
          <img src="../../static/image/pdx.jpeg" alt="">
        </div>
        <div class="right__sentence">
          <div class="horn">
          </div>
          <div class="main__sentence">
            <div class="en__s">
              <p>Desperadoes no way back.</p>
            </div>
            <div class="ch__s">
              <p>吾欲远方独闯，更何惧天寒地冻路遥马亡。</p>
            </div>
            <div class="author">
              <p> - Ricard M Lu</p>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="right__recommend">
      <div class="top__recommend__title">
        <p>今日推荐</p>
      </div>
      <div class="recommend__content">
        <div class="recommend__img">
          <img src="../../static/image/ddm.jpg" alt="">
        </div>
        <div class="recommend__inf">
          <div class="inf__title">
            <p>
              词霸，想改变的人都在这里
            </p>
          </div>
          <div class="inf__content">
            <p>每天千万人共同背词<br>
              陪你一起改变 共同成长<br>
              还有负责的组长监督和鼓励<br>
              英语学习的道路上你不是孤军奋战<br>
              来结识适合你的那群人吧(ง •̀_•́)ง</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {


  data() {
    return {
      imgList2: [
        {id: 0, idView: '../../static/image/11.jpeg'},
        {id: 1, idView: '../../static/image/22.jpeg'},
        {id: 2, idView: '../../static/image/33.jpeg'},
        {id: 3, idView: '../../static/image/44.jpeg'},
        {id: 4, idView: '../../static/image/55.jpeg'},
        {id: 5, idView: '../../static/image/66.jpeg'}
      ],
    }
  }
}
</script>

<style scoped>

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


*{
  padding: 0;
  margin: 0;
}

body{
  width: 100%;
  background-color: #eee;
  font-size: 13px;
}



.mid__inf{
  width: 1170px;
  height: 241px;
  background-color:#f0f0f0;
  margin: 50px auto;
  box-shadow: #CCC 2px 2px 8px;
  border-radius: 4px;
}
.mid__inf:hover{
  box-shadow: #CCC 6px 2px 8px;

}


.tasks__list{
  width: 100%;
  height: 273px;
  /* background-color: red; */
}

ul li{
  float: left;
  list-style: none;

}


zero{
  font-size: 35px;
  color: #209E85;
  font-weight: bold;
}

.logo{
  width: 100px;
  padding-top: 6px;
  padding-left: 72px;
  cursor: pointer;
}

.logo img{
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}



.input__btn input{
  color: white;
  background-color:#209E85;
  border-style: none;
  height: 20px;
  width: 71px;
  margin: 0 0 0 12px;
  text-shadow: none;
  outline: none;
  transition: all 0.5s;
  /* background-color: red; */
}

input::-webkit-input-placeholder {
  color: white;
}

.search__img{
  position: absolute;
  /* background-color: red; */
  width: 23px;
  height: 22px;
  right: 10px;
  top: 4px;
  cursor: pointer;
}

.search__img img{
  height: 100%;
  width: 100%;
}


.login__btn:hover .dropdown{
  display: block;
}

.line{
  height: 4px;
  width: 150px;
  margin: 1px 26px 0px -20px;
  overflow: hidden;
  border-bottom: 1px solid rgba(202, 198, 198, 0.5);
  overflow: hidden;
  cursor: default	;
}



.dropdown__menu li{
  padding: 2px 78px 0 18px;
  display: block;
  text-decoration: none;
  clear: both;
  line-height: 20px;
  margin-top: 7px;
  cursor: pointer;

}

.dropdown__menu li:nth-child(10){
  margin-bottom: 7px;
}

.dropdown .dropdown__menu li:nth-child(1):hover,.dropdown .dropdown__menu li:nth-child(2):hover,.dropdown .dropdown__menu li:nth-child(3):hover,.dropdown .dropdown__menu li:nth-child(4):hover,
li:nth-child(6):hover, li:nth-child(7):hover, li:nth-child(9):hover, li:nth-child(10):hover
{
  background-color: #209E85;
  color: white;
}



.user__login__img img{
  width: 100%;
  height: 100%;
  border-radius: 4px;
}


.arraw img{
  height: 8px;
  width: 13px;
}

.mid__item{
  margin: 1px 0 1px 0;
  height: 85px;
  border-bottom: 1px solid #cac8c8;
}

.left__sentence, .right__recommend{
  height: 100%;
  float: left;
  border-bottom: 1px solid #cac8c8;
  background-color: #eee;
}

.left__sentence{
  width: 760px;
  border-right: 1px solid #cac8c8;
  color: #333;
}

.right__recommend{
  width: 406px;
}

.top__days{
  /* background-color: red; */
  height: 57px;
  position: relative;
  border-bottom:1px solid#ece8e8;
}

.days{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.days p{
  font-size: 24px;
  line-height: 27px;
  font-weight: normal;
}

.days num_d{
  color: #209E85;
}

.mid__sentence{
  height: 112px;
  /* background-color: green; */
}

.left__user__img{
  /* background-color: red; */
  position: absolute;
  height: 58px;
  width: 63px;
  margin: 21px 0px 0px 31px;
}

.right__sentence{
  /* background-color: red; */
  height: 100%;
  width: 646px;
  position: relative;
  left: 114px;
}

.horn{
  position: absolute;
  /* background-color: red; */
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-right: 10px solid #DDD;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  top: 35px;
  font-size: 13px;
  line-height: 20px;
}

.main__sentence{
  position: relative;
  background-color: #DDD;
  width: 591px;
  height: 70px;
  left: 20px;
  top: 20px;
  border-radius: 5px;
  padding: 10px;
}

.en__s{
  position: absolute;
  /* background-color: red; */
  width: 500px;
  height: 25px;
  left: 34px;
  top: 22px;
  font-size: 16px;
}

.ch__s{
  position: absolute;
  /* background-color: blue; */
  width: 500px;
  height: 25px;
  left: 34px;
  top: 42px;
  font-size: 16px;
  color: #333333;
}

.author
{
  position: absolute;
  /* background-color: green; */
  width: 200px;
  height: 20px;
  left: 277px;
  top: 68px;
  color: #999;
}


.sina__img img{
  height: 100%;
  width: 100%;
  margin-top: 15px;
  cursor: pointer;
}

.share__inf{
  background-color: #fcf8e3;
  width: 247px;
  height: 27px;
  position: absolute;
  margin: -35px 0px 0 40px;
  border: 1px solid #fbeed5;
  padding: 10px 1px 0px 11px;
}

.share__inf a{
  color: #0088cc;
  text-decoration: none;
}

.share__inf a:hover{
  color: #0e0caa;
}

.top__recommend__title{
  /* background-color: red; */
  margin: 2px 10px 10px 25px;
  padding: 10px;
  font-size: 24px;
}

.recommend__content{
  /* background-color: red; */
  width: 347px;
  height: 150px;
  margin: 24px 0 0 37px;
  position: relative;
}

.recommend__img{
  position: absolute;
  /* background-color: blue; */
  width: 117px;
  height: 143px;
}

.recommend__img img{
  height: 100%;
  width: 100%;
  cursor: pointer;

}

.inf__title{
  width: 220px;
  height: 40px;
  position: absolute;
  right: -10px;
  font-size: 20px;
  color: #209E85;
  cursor: pointer;

}

.inf__content{
  position: absolute;
  /* background-color: blue; */
  font-size: 13px;
  color: #333333;
  width: 224px;
  height: 83px;
  right: -10px;
  bottom: 0px;
}

.bottom__left span{
  display: block;
  width: 170px;
  height: 163px;
  float: left;
  margin-right:30px;
  cursor: pointer;
  background-color: white;
  border-radius: 5px;
  box-shadow: #CCC 2px 2px 8px;

}

.bottom__left span:hover{
  box-shadow: #CCC 6px 2px 8px;
  transform: scale(1.01);
}



.top__img img{
  height: 100%;
  width: 100%;
  border-radius: 5px;
}



.bottom__right img{
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

.bottom__right img:hover{
  transform: scale(1.03);
}
</style>
